
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="${PATH}/layui/css/layui.css" media="all">
    <script src="${PATH}/layui/layui.js" charset="UTF-8"></script>
    <script src="${PATH}/jquery/jquery-2.1.1.min.js"></script>
    <style type="text/css">
        .layui-table-cell{
            height:18px;
            line-height: 18px;
        }

        /*
            设置layui的输入框的行高
        */
        .layui-form-label {
            padding: 5px 15px;
        }
        .layui-input, .layui-select, .layui-textarea {
            height: 30px;
            line-height: 30px\9;
        }
        .layui-form-select dl dd, .layui-form-select dl dt {
            line-height: 30px;
        }
    </style>
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">开始日期：</label>
            <div class="layui-input-inline">
                <input type="text" id="test1" name="startTime" lay-verify="required" autocomplete="off" placeholder="请输入订单开始日期" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">结束日期：</label>
            <div class="layui-input-inline">
                <input type="text" id="test2" name="endTime" lay-verify="required" placeholder="请输入订单结束日期" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">客户名称：</label>
            <div class="layui-input-inline">
                <input type="text" id="kehu" name="customName" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">查找设置：</label>
            <div class="layui-input-inline">
                <input type="radio" name="isFind" value="精确查找：" title="精确查找">
                <input type="radio" name="isFind" value="模糊查找：" title="模糊查找">
            </div>
        </div>
        <div class="layui-form-item">
        <label class="layui-form-label">发票类型：</label>
        <div class="layui-input-block">
            <select name="billType" lay-filter="select">
                <option value="er">全部类型</option>
                <option value="s">专票</option>
                <option value="c">普票</option>
                <option value="c1">电子发票</option>
                <option value="c2">收购发票</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">订单号码：</label>
            <div class="layui-input-inline">
                <input type="text" id="billCode" name="billCode"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-input-block">
            <button type="reset" class="layui-btn layui-btn-primary">重置数据</button>
            <button class="layui-btn" lay-submit lay-filter="formDemo">导入数据</button>
        </div>
    </div>
</form>
<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        $.ajax({
            type: 'get',
            url :"${PATH}/show/findInput",
            success:function (result) {
                //注意这里一定需要双等号
                if(result.code == 0) {

                    $("#test1").val(result.data.startTime);
                    $("#test2").val(result.data.endTime);
                    $("#kehu").val(result.data.customName);
                    $("#billCode").val(result.data.billCode);
                    $("input[name=isFind][value='精确查找：']").attr("checked", result.data.isFind == '精确查找：' ? true : false);
                    $("input[name=isFind][value='模糊查找：']").attr("checked", result.data.isFind == '模糊查找：' ? true : false);
                    $("select[name='billType']").find('option[value='+result.data.billType+']')[0].setAttribute("selected",'true');
                    //一定要加这个玩意，不然单选按钮会不显示
                    form.render();
                }
            },
            error:function () {
                layer.alert("请检查网络设置！")
            }

        });

        //日期
        laydate.render({
            elem: '#test1'
        });
        laydate.render({
            elem: '#test2'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 5){
                    return '标题至少得5个字符啊';
                }
            }
            ,pass: [/(.+){6,12}$/, '密码必须6到12位']
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });

        //监听提交
        form.on('submit(formDemo)', function(data){
            //判断时间的顺序
            var startTime = new Date($("#test1").val());
            var endTime = new Date($("#test2").val());
            if(startTime.getTime() > endTime.getTime()){
                layer.msg("开始时间不能大于结束时间");
                return false;
            }
            var loadingIndex = null;
            var index = parent.layer.getFrameIndex(window.name);
            var input = data.field;
            //注意这里的这个input是一个对象而不是一个字符串，所以不能使用json.stringify
           /* layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            });*/

            $.ajax({
                type:'get',
                async:true,
                url:'${PATH}/show/input?id=1',
                data: input,
                beforeSend : function () {
                    loadingIndex = layer.msg('正在导入数据...', {icon: 16,time:false});
                },
                success : function (result) {
                    layer.close(loadingIndex);
                    //这里的trycatch的代码没有写
                    if(result.code == 0){
                        layer.msg("导入数据成功！")
                        //延时加载
                        setTimeout(function() {
                            parent.layer.close(index)
                        }, 1000);
                    }
                    else if(result.code == 1) {
                        layer.alert("导入数据失败："+result.msg,{
                            icon: 5,
                            title: "导入失败",
                            time:2000
                        });
                        return false;
                    }
                    //parent.layer.close(index);
                },
                error : function (result) {
                    layer.alert("导入数据失败，请检查网络设置");
                },


            });
            //不加这个会导致form自动刷新，从而使得ajax的success不显示
            return false;
        });

    });
</script>
</body>
</html>
